<template>
  <div class="barsBars-box">
    <ul class="barsBars">
      <li
        v-for="(item, index) of data"
        :key="index"
      >
        <bars
          :xData="item.xData"
          :data="item.data"
          :color="tempSettings.color"
          :yName="tempSettings.yName"
          :grid="tempSettings.grid"
          :rotate="tempSettings.rotate"
          :xSize="tempSettings.xSize"
          :addYAxis="tempSettings.addYAxis"
        >
        </bars>
      </li>
    </ul>
  </div>
</template>

<script>
import Bars from '@/common/echarts/expand/Bars'
export default {
  name: 'BarsBars',
  components: {
    Bars
  },
  props: {
    'data': {
      type: Array,
      default () {
        return [{
          xData: ['2018-01'],
          data:
          [
            {
              name: '最大出勤比',
              value: [15]
            },
            {
              name: '最小出勤比',
              value: [20]
            },
            {
              name: '',
              value: [0]
            },
            {
              name: '最大出勤人数',
              value: [152]
            },
            {
              name: '最小出勤人数',
              value: [223]
            }
          ]
        }, {
          xData: ['2018-02'],
          data:
          [
            {
              name: '男童',
              value: [15]
            },
            {
              name: '女童',
              value: [34]
            }
          ]
        }, {
          xData: ['2018-03'],
          data: [
            {
              name: '男童',
              value: [15]
            },
            {
              name: '女童',
              value: [23]
            }
          ]
        }]
      }
    },
    'xData': {
      type: Array,
      default () {
        return ['最低出勤率', '最高出勤率', '月请假人数', '月缺勤人数']
      }
    },
    'maxVal': {
      type: Number,
      default: null
    },
    'labelNuit': {
      type: String,
      default: '{c}%'
    },
    'yName': {
      type: String,
      default: '人数（人）'
    }
  },
  data () {
    return {
      tempSettings: {
        xData: ['暂无数据'],
        data:
        [
          {
            name: '男童',
            value: [0]
          },
          {
            name: '女童',
            value: [0]
          }
        ],
        yName: '出勤百分比(%)',
        color: ['#ff6dff', '#315bff'],
        grid: {
          top: '20%',
          left: '10%',
          right: '10%',
          bottom: '10%',
          containLabel: true
        },
        rotate: 0,
        xSize: 7,
        addYAxis: {
          min: 0,
          name: '出勤人数(人)',
          nameTextStyle: {
            color: '#536390',
            padding: [0, 0, 0, 20]
          },
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(57, 121, 211, .5)'
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(24, 61, 111, .4)', 'rgba(24, 61, 111, 0)']
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#536390'
            }
          }
        }
      }
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="stylus" scoped>
.barsBars-box
  width: 100%
  .barsBars
    width: 100%
    li
      height: 160px
      width: 33.3%
      float: left
      margin-top: 10px
</style>
